<ion-header style="opacity: 0.9">
  <ion-navbar>
    <ion-title>Virtual Scroll: Image Gallery</ion-title>
    <ion-buttons end>
      <button ion-button (click)="reload()">
        Reload
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content fullscreen>

  <h4 padding>
    Name these cars:
  </h4>

  <ion-list [virtualScroll]="items"
            [headerFn]="headerFn"
            [footerFn]="footerFn"
            approxItemWidth="80px"
            approxItemHeight="80px"
            approxFooterWidth="80px"
            approxFooterHeight="80px"
            approxHeaderWidth="100%"
            approxHeaderHeight="36px">

    <div *virtualHeader="let header" class="virtual-header">
      Header: {{header.date}}
    </div>

    <div *virtualItem="let item" class="virtual-item">
      <ion-img [src]="item.imgSrc"></ion-img>
      <!--{{ item.index }}-->
    </div>

    <div *virtualFooter="let footer" class="virtual-footer">
      footer
    </div>

  </ion-list>

  <h4 padding>
    How many did you get right?
  </h4>

</ion-content>

<style>
  .virtual-header {
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
    background: #eee;
  }
  .virtual-item {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 80px;
    margin-left: 5px;
    margin-bottom: 5px;
    border: 1px solid gray;
  }
  .virtual-footer {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid red;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 10px;
  }
  .virtual-scroll > :first-child {
    border-top: 2px solid blue;
  }
  .virtual-scroll > :last-child {
    background: red;
  }
</style>
